<template>
  <view class="msa-container">
    <view class="collection">
      <view class="collection_left">代收金额</view>
      <view class="collection_right">
        <view class="inputs"> <nut-input v-model="sendGoodsStore.collectionMoney" type="number" placeholder="请输入代收金额" @update:model-value='serveFeeCount' /></view>
        <view class="text">元</view>
      </view>
    </view>
    <view class="collection_row">
      <view class="one">
        <view class="left">返还周期</view>
        <nut-radio-group v-model="sendGoodsStore.returnCycle" direction="horizontal" @change="serveFeeCount">
          <nut-radio label="1">即日退</nut-radio>
          <nut-radio label="2">三日退</nut-radio>
          <nut-radio label="3">月结</nut-radio>
        </nut-radio-group>
      </view>
      <view class="one ones " @click="openRetenTypePop">
        <view class="left">返还方式</view>
        <text>{{sendGoodsStore.returnType == '2' && !sendGoodsStore.returunAccount?'请选择货款返还方式':returnChoose()}}</text>
      </view>
    </view>
    <view class="big_box">
      <view class="chilren_box">
        <p class="hh">收费标准：</p>
        <p>1个工作日返回：3000元以下(含)，收费30元/票；3000元~20000元以下(含)，按代收货款金额3‰收费，20000元以上，收费200元/票。</p>
        <p>3个工作日返回：2000元以下(含)，收费5元/票；2000元~10000元以下(含)，按代收货款金额3‰收费，10000元以上，收费30元/票。</p>
        <p class="hh dd">其他说明：</p>
        <p>1.费用预估仅供参考，具体以开单收取为准。</p>
        <p>2.具体的收费信息可咨询当地营业部或952999。</p>
        <p>3.代收货款实行转账支付。</p>
      </view>
    </view>
    <view class="keep_money_foot">
      <view class="left">
        <view class="one">手续费</view>
        <view class="tow">￥{{sendGoodsStore.serveFee}}</view>
      </view>
      <view class="right" @click="getKeepMoneyInfo" :class="{insureMoney_active:blueSure}">确 定</view>
    </view>



    <!-- 返还方式选择弹窗 -->
    <nut-popup :style="{ height: '50%' }" position="bottom" :closeable="true" round v-model:visible="collectionPop">
      <view class="sendTypePop">
        <view class="title">承运类型</view>
        <view class="contant">
          <view class="row">
            <view class="block" :class="{actives:sendGoodsStore.returnType == '2'}" @click="chooseType('2')">银行卡</view>
            <view class="block" :class="{actives:sendGoodsStore.returnType == '3'}" @click="chooseType('3')">微信</view>
            <view class="block" :class="{actives:sendGoodsStore.returnType == '5'}" @click="chooseType('5')">支付宝</view>
          </view>
          <view class="row">
            <view class="block" :class="{actives:sendGoodsStore.returnType == '4'}" @click="chooseType('4')">现金</view>
          </view>
          <view class="type_div" v-if="sendGoodsStore.returnType == '2'">
            <view class="type_div_div" @click="gotoBank">
              <view class="left">银行账户</view>
              <text>{{returunAccount||'请选择银行账户' }}</text>
            </view>
          </view>
          <view class="type_div" v-if="sendGoodsStore.returnType == '3' || sendGoodsStore.returnType == '5'">
            <view class="type_div_div">
              <view class="left">手机号</view>
              <nut-input placeholder="请输入手机号" v-model="returunPhone"></nut-input>
            </view>
          </view>
          <view class="type_div" v-if="sendGoodsStore.returnType == '4'">
            <view class="row1">
              <image src="@/assets/images/index/wangdian_img_fanhuanwangdian.png"></image>
              <view class="text">
                <view class="text1">{{ sendGoodsStore.sendBranch.info.COMPANYNAME }}</view>
                <view class="text2">{{  sendGoodsStore.sendBranch.info.LOCAL}}</view>
                <view class="text3">距离收货地{{ (sendGoodsStore.sendBranch.info.distance/1000).toFixed(2) }}Km</view>
              </view>
              <view class="icon_group">
                <image src="@/assets/images/index/icon_wangdiandianhua.png"></image>
                <image src="@/assets/images/index/icon_wangdiandaohang.png"></image>
              </view>
              <!-- </view> -->
            </view>
          </view>
        </view>

        <view class="foot">
          <view class="button" @click="returnTypeSure" :class="{insureMoney_active:canSubmit }">确 定</view>
        </view>
      </view>

    </nut-popup>
  </view>
</template>
<script lang="ts" setup>
import { ref ,computed} from "vue";
import useSendGoodsStore from "../../store/sendGoods";
import Taro, {useDidShow} from "@tarojs/taro";
import useUserInfoStore from "@/store/user";
const sendGoodsStore = useSendGoodsStore()
const userStore = useUserInfoStore() //userStore.userInfo.phone
const returunAccount = ref<string>(sendGoodsStore.returunAccount || '')
const returunPhone = ref<string>(userStore.userInfo.phone||'')
const collectionPop = ref<boolean>(false)
const canSubmit = computed(()=>{
  return sendGoodsStore.collectionMoney && sendGoodsStore.collectionMoney!='0' && (sendGoodsStore.returnType == '2' && returunAccount.value)
      || ((sendGoodsStore.returnType == '3' || sendGoodsStore.returnType == '5') && returunPhone.value)
      || sendGoodsStore.returnType =='4'
})


function openRetenTypePop() {
  collectionPop.value = true;
}
function returnChoose() {

  if (sendGoodsStore.returnType == "2") {
    return '银行卡返还'
  } else if (sendGoodsStore.returnType == "3") {
    return '微信返还'
  }else if (sendGoodsStore.returnType == "5") {
    return '支付宝返还'
  }else{
    return '现金返还'
  }
}

function serveFeeCount() {
  if (
      sendGoodsStore.collectionMoney == "" ||
      sendGoodsStore.collectionMoney == "0"
  ) {
    sendGoodsStore.serveFee = "0";
    return;
  }
  let cost = Number(sendGoodsStore.collectionMoney);
  if (sendGoodsStore.returnCycle == "1") {
    if (cost <= 3000) {
      sendGoodsStore.serveFee = "30";
    } else if (cost > 3000 && cost <= 20000) {
      sendGoodsStore.serveFee = String(((cost * 3) / 1000).toFixed(2));
    } else if (cost > 20000) {
      sendGoodsStore.serveFee = "200";
    }
  } else if (sendGoodsStore.returnCycle == "2") {
    if (cost <= 2000) {
      sendGoodsStore.serveFee = "5";
    } else if (cost > 2000 && cost <= 10000) {
      sendGoodsStore.serveFee = String(((cost * 3) / 1000).toFixed(2));
    } else if (cost > 10000) {
      sendGoodsStore.serveFee = "30";
    }
  } else {
    sendGoodsStore.serveFee = "0";
  }
}

function blueSure(){
  if(!(sendGoodsStore.collectionMoney != '0' && sendGoodsStore.collectionMoney)){
    return false
  }
  if(sendGoodsStore.returnType == '2' && !returunAccount.value){
    return false
  }
  return true
}
function getKeepMoneyInfo() {
  console.log(sendGoodsStore.collectionMoney,sendGoodsStore.returnType,returunAccount.value,996996)
  if(!(sendGoodsStore.collectionMoney != '0' && sendGoodsStore.collectionMoney)){
    return
  }
  if(sendGoodsStore.returnType == '2' && !returunAccount.value){
    return Taro.showToast({
      icon: 'none',
      title: '请选择银行账户'
    })
  }
  if(sendGoodsStore.moreChoose.indexOf('1')==-1)
  sendGoodsStore.moreChoose.push('1')
  console.log(sendGoodsStore.moreChoose,"选项");
  Taro.navigateBack()
}

function returnTypeSure() {
  if (
      !(
          (sendGoodsStore.returnType == "2" && returunAccount.value) ||
          sendGoodsStore.returnType != "2"
      )
  ) {
    return;
  }
  if(sendGoodsStore.returnType == "2"){
    sendGoodsStore.returunAccount = returunAccount.value
  }
  else if(sendGoodsStore.returnType == "3" || sendGoodsStore.returnType == "5"){
    sendGoodsStore.returunAccount = returunPhone.value
  }
  collectionPop.value = false;
}
function gotoBank() {
  Taro.navigateTo({
    url: "/pages/myBankAccount/index?type=select",
  });
}
function chooseType(index: string) {
  if (index != "2") {
    returunAccount.value == null;
  }
  sendGoodsStore.returnType = index;
}

useDidShow(()=>{
  let pages = Taro.getCurrentPages();
  let currPage = pages[pages.length - 1]
  if (currPage.__data__.info) {
    returunAccount.value = currPage.__data__.info.accountNo
  }
})

function transformCode (val) {
  if(!val){
    return ''
  }
  else {
    return val.substr(0,4) + ' **** **** ' + val.substr(-4)
  }
}
</script>
<style lang="scss">
page {
  background-color: #f5f5f5;
}
.msa-container {
  width: 100%;
  box-sizing: border-box;
  padding: 24rpx;

  .collection {
    width: 100%;
    background-color: #fff;
    height: 104rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 16rpx;
    .collection_left {
      font-family: PingFang SC Medium;
      font-size: 28rpx;
      color: #666666;
    }
    .collection_right {
      display: flex;
      align-items: center;
      .inputs {
        width: 450rpx;
        height: 72rpx;
        border-radius: 8rpx;
        background: #f5f5f5;
        display: flex;
        justify-content: center;
        align-items: center;
        .nut-input--border {
          border: unset;
        }
        .nut-input {
          background-color: unset;
          padding: 0;
        }
        .nut-input-value {
          display: flex;
          align-items: center;
        }
      }
      .text {
        font-family: PingFang SC Medium;
        font-size: 28rpx;
        color: #252525;
      }
    }
  }
  .collection_row {
    margin-top: 24rpx;
    height: 208rpx;
    background-color: #fff;
    border-radius: 16rpx;
    .one {
      width: 100%;
      height: 103rpx;
      border-bottom: 1rpx solid #f5f5f5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        font-family: PingFang SC Medium;
        font-size: 28rpx;
        color: #666666;
        margin-left: 24rpx;
      }
    }
    .ones {
      height: 104rpx;
      border: unset;
      position: relative;
      text {
        font-family: PingFang SC;
        font-size: 28rpx;
        color: #999999;
        margin-right: 60rpx;
      }
    }
  }
  .ones:before {
    position: absolute;
    top: 0;
    right: 30px;
    bottom: 0;
    display: block;
    margin: auto;
    width: 30px;
    height: 30px;
    color: #8799a3;
    content: "\e6a3";
    text-align: center;
    font-size: 34px;
    font-family: cuIcon;
    line-height: 30px;
  }
  .big_box {
    width: 100%;
    height: 332rpx;
    box-sizing: border-box;
    margin-top: 24rpx;
    .chilren_box {
      padding: 24rpx;
      box-sizing: border-box;
      width: 700rpx;
      height: 330rpx;
      border-radius: 16rpx;
      opacity: 1;
      background-color: #e5efff;
      border: 1rpx solid #b2d0ff;
      p {
        font-family: PingFang SC;
        font-size: 20rpx;
        color: #666666;
      }
      .hh {
        font-family: PingFang SC Medium;
        font-size: 24rpx;
        color: #666666;
      }
      .dd {
        margin-top: 24rpx;
      }
    }
  }
  .insureMoney_active {
    background-color: #0966ff !important;
  }
}
.keep_money_foot {
  width: 100%;
  height: 128rpx;
  // background-color: red;
  position: fixed;
  bottom: 0;
  left: 0rpx;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  box-sizing: border-box;
  justify-content: space-between;
  background-color: white;
  .left {
    display: flex;
    .one {
      font-family: PingFang SC Medium;
      font-size: 28rpx;
      color: #252525;
      font-weight: 700;
      margin-right: 16rpx;
    }
    .tow {
      font-family: PingFang SC Medium;
      font-size: 28rpx;
      color: #0966ff;
    }
  }
  .right {
    width: 460rpx;
    height: 88rpx;
    border-radius: 200rpx;
    background: #999999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #ffffff;
  }
}
.sendTypePop {
  .foot {
    width: 100%;
    height: 128rpx;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    background: white;
    .button {
      width: 702rpx;
      height: 88rpx;
      border-radius: 200rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #999999;
      font-family: PingFang SC Medium;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
  .title {
    height: 112rpx;
    display: flex;
    align-items: center;
    margin-left: 24rpx;
    font-family: PingFangSC-Semibold;
    font-size: 32rpx;
    color: #252525;
    font-weight: 700;
  }
  .contant {
    height: calc(100% - 112rpx);
    width: 100%;
    overflow: auto;
    .row {
      width: 100%;
      height: 72rpx;
      padding: 0 24rpx;
      box-sizing: border-box;
      display: flex;
      margin-bottom: 24rpx;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      .block {
        width: 218rpx;
        height: 71px;
        border-radius: 88rpx;
        border: 1rpx solid rgba(0, 0, 0, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        &.actives {
          border: 1px solid #0966ff !important;
          background: rgba(9, 102, 255, 0.05) !important;
          color: #0966ff !important;
        }
      }
      .blocks {
        width: 218rpx;
        height: 71px;
        border-radius: 88rpx;
        border: 1rpx solid rgba(0, 0, 0, 0.06);
        margin: 0 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .type_div {
      width: 100%;
      //height: 88rpx;
      padding: 0 24rpx;
      box-sizing: border-box;
      .type_div_div {
        padding: 0 24rpx;
        box-sizing: border-box;
        width: 702rpx;
        height: 88rpx;
        border-radius: 8rpx;
        background: #f5f5f5;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: PingFang SC;
        font-size: 28rpx;
        color: #666666;
        text {
          margin-right: 60rpx;
        }
        .left {
          width: 120rpx;
        }
        .nut-input {
          border: none;
          background-color: transparent;
        }
      }
      .row1 {
        position: relative;
        width: 100%;
        height: 176rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        image {
          width: 112rpx;
          height: 112rpx;
          margin-right: 16rpx;
        }
        .text {
          height: 112rpx;
          width: 334rpx;
          .text1 {
            font-weight: 700;
            font-family: PingFangSC-Semibold;
            font-size: 28rpx;
            color: #252525;
          }
          .text2 {
            font-family: PingFang SC;
            font-size: 22rpx;
            color: #666666;
            margin-bottom: 16rpx;
            width: 300rpx;
            height: 30rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .text3 {
            font-family: PingFang SC;
            font-size: 22rpx;
            color: #666666;
          }
        }
        .icon_group {
          display: flex;
          height: 100%;
          align-items: center;
          margin-left: 100rpx;
          image {
            width: 64rpx;
            height: 64rpx;
          }
        }
      }
    }
  }
}
</style>
